<template>
<div class="app-container">
  <el-row>
    <el-col :span="24">
      <div class="top-box">
        <div v-if="top.state">
          <span>订单状态:<span>{{top.state}}</span></span>
          <span v-if="top.joined">已参团{{top.joined}}人，还差{{top.differ}}人拼成，剩余时间：{{top.lastTime}}</span>
        </div>
        <div v-if="top.payLastTime">
          <span>支付剩余时间:{{top.payLastTime}}</span>
        </div>
        <div v-if="top.orderType">
          <span>订单状态:{{top.orderId}}</span>
          <span>{{top.orderType}}</span>
        </div>
        <p class="close" v-if="close">订单已取消</p>
      </div>
    </el-col>
  </el-row>
  <el-row v-if="active">
    <el-col :span="24">
      <el-steps :active="active" align-center>
        <el-step title="步骤1" description="平台派单成功"></el-step>
        <el-step title="步骤2" description="商家派单成功"></el-step>
        <el-step title="步骤3" description="服务人员上门"></el-step>
        <el-step title="步骤4" description="校验服务人员身份"></el-step>
        <el-step title="步骤1" description="确认服务人员上门时间"></el-step>
        <el-step title="步骤2" description="服务人员确认订单"></el-step>
        <el-step title="步骤3" description="开始服务"></el-step>
        <el-step title="步骤4" description="服务结束，确认完成"></el-step>
        <el-step title="步骤1" description="订单完成"></el-step>
      </el-steps>
    </el-col>
  </el-row>
  <el-form ref="form" label-width="160px">
    <div class="title">用户信息</div>
    <el-form-item v-if="item.mes" :key="item.id" v-for="item in user" :label='item.label'>
      <span v-text="item.mes"></span>
    </el-form-item>
  </el-form>
  <el-form ref="form" label-width="160px">
    <div class="title">订单信息</div>
    <el-form-item v-if="item.mes" :key="item.id" v-for="item in order" :label='item.label'>
      <span v-text="item.mes"></span>
    </el-form-item>
  </el-form>
  <div class="title" v-if="busniess.busName">商家信息</div>
  <el-form ref="form" label-width="160px">
    <el-form-item v-if="busniess.busName" label="商家名称:">
      <span  v-text="busniess.busName"></span>
    </el-form-item>
    <el-form-item v-if="busniess.busName" label="商家地址:">
      <span v-text="busniess.busAdress"></span>
    </el-form-item>
    <el-form-item v-if="busniess.busPer" label="商家联系人:">
      <span v-text="busniess.busPer"></span>
    </el-form-item>
    <el-form-item v-if="busniess.busTel" label="商家联系方式:">
      <span v-text="busniess.busTel"></span>
    </el-form-item>
  </el-form>
  <div class="title">服务信息</div>
  <el-table :data="service" border style="width: 100%">
    <el-table-column align="center" prop="service" label="服务" width="180">
    </el-table-column>
    <el-table-column align="center" prop="time" label="服务时间" width="180">
    </el-table-column>
    <el-table-column align="center" prop="orderMon" label="订单金额">
    </el-table-column>
    <el-table-column align="center" prop="payMon" label="实付金额">
    </el-table-column>
  </el-table>
  <el-col :span="24">
    <div class="footer">
      <div @click="lookOne" class="active">服务详情</div>
      <div @click="lookTwo">服务人员详情</div>
    </div>
    <div class="one">

    </div>
    <div class="two">
      <el-form ref="form" :model="personMes" label-width="160px">
        <el-form-item label="头像:">
          <span v-text="personMes.logo"></span>
        </el-form-item>
        <el-form-item label="姓名:">
          <span v-text="personMes.name"></span>
        </el-form-item>
        <el-form-item label="手机号:">
          <span v-text="personMes.tel"></span>
        </el-form-item>
        <el-form-item label="身份证号:">
          <span v-text="personMes.id"></span>
        </el-form-item>
        <el-form-item label="年龄:">
          <span v-text="personMes.age"></span>
        </el-form-item>
        <el-form-item label="性别:">
          <span v-text="personMes.sex"></span>
        </el-form-item>
        <el-form-item label="所属区域:">
          <span v-text="personMes.pleace"></span>
        </el-form-item>
        <el-form-item label="服务技能:">
          <span v-text="personMes.skill"></span>
        </el-form-item>
        <el-form-item label="企业识别号:">
          <span v-text="personMes.busId"></span>
        </el-form-item>
        <el-form-item label="上传身份证-人像面:">
          <img v-bind:src="personMes.face" alt="人像面">
        </el-form-item>
        <el-form-item label="上传身份证-国徽面:">
          <img v-bind:src="personMes.face" alt="国徽面">
        </el-form-item>
      </el-form>
    </div>
  </el-col>
</div>
</template>

<script>
export default {
  methods:{
    lookOne() {
      $('.footer div:first-child').addClass('active');
      $('.footer div:last-child').removeClass('active');
      $('.one').show()
      $('.two').hide()
    },
    lookTwo() {
      $('.footer div:last-child').addClass('active');
      $('.footer div:first-child').removeClass('active');
      $('.one').hide()
      $('.two').show()
    }
  },
  data(){
    return{
      top:{
        state:'拼团失败-退款成功',
        // joined:5,
        // differ:4,
        // lastTime:'02:42:23',
        // payLastTime:'02:42:23',
        orderId:'180816-0747123456',
        orderType:'拼团订单'
      },
      active:0,
      close:'',
      user:[
        {label:'用户昵称',mes:'马八'},
        {label:'服务地址',mes:'天堂'},
        {label:'联系人',mes:'马八'},
        {label:'联系方式',mes:'12312312312'},
      ],
      order:[
        {label:'下单时间',mes:'2018 09 01 04:00pm'},
        {label:'支付方式',mes:'2018 09 01 04:00pm'},
        {label:'支付时间',mes:'未支付'},
        // {label:'第三方交易号',mes:'2018 09 01 04:00pm'},
        // {label:'成团时间',mes:'2018 09 01 04:00pm'},
        // {label:'平台派单时间',mes:'2018 09 01 04:00pm'},
        // {label:'商家派单时间',mes:'2018 09 01 04:00pm'},
        // {label:'服务人员上门时间',mes:'2018 09 01 04:00pm'},
        // {label:'确认服务人员上门时间',mes:'2018 09 01 04:00pm'},
        // {label:'服务人员确认订单时间',mes:'2018 09 01 04:00pm'},
        // {label:'开始服务时间',mes:'2018 09 01 04:00pm'},
        // {label:'服务人员服务结束时间',mes:'2018 09 01 04:00pm'},
        // {label:'订单完成时间',mes:'2018 09 01 04:00pm'},
        // {label:'订单完成时间',mes:'2018 09 01 04:00pm'}
      ],
      service:[{
        service:'家庭保洁1小时',
        time:'2018-08-19 10:00',
        orderMon:'¥30.00',
        payMon:'¥30.00'
      }],
      busniess:{
        // busName:'洁云家政',
        // busAdress:'上海市黄埔区蒙自路169号',
        // busPer:'易烊千玺',
        // busTel:'+86 18512345678',
      },
      personMes:{
        logo:'',
        name:'messi',
        tel:'12312312311',
        id:'2313123',
        age:'24',
        sex:'man',
        pleace:'shanghai',
        skill:'eat',
        busId:'sadda',
        face:'',
        bak:''
      },
    }
  }
}
</script>

<style scoped>
.el-steps{
  margin: 20px 0;
}
.title{
  height: 30px;
  line-height: 30px;
  font-weight: bold;
  border-top: 1px solid #d4d4d4;
}
.top-box{
  background: #eaf4fd;
  padding: 10px;
  border: 1px solid #d4e4f3;
}
.top-box div{
  display: flex;
  justify-content: space-between;
  margin: 10px;
}
.state{
  width: 10%;
  font-size: 12px;
  line-height: 30px;
  text-align: center;
  display: inline-block;
}
.footer{
  line-height: 30px;
  font-weight: 600;
  margin-top: 20px;
  border-bottom: 1px solid #d4d4d4;
}
.footer div{
  display: inline-block;
  width: 120px;
  text-align: center;
}
.footer div:hover{
  background: #d4e4f3;
}
.two{
  display: none;
}
.footer .active{
  background: #d4e4f3;
}
.close{
  font-size: 26px;
}
</style>
